<template>
	<view>
		<z-paging :show-refresher-when-reload="false"  show-refresher-update-time  ref="paging" v-model="dataList" @query="queryList">
			<view slot="top" class="">
				<u-navbar :is-back="false" back-text=" " :title-color="style.color5" :background="{background:style.color2}" :title-size="30" :title-width="400" title="购物车">
					<view class="" slot="right">
						<view @click="edit" class="top_box_right" style="padding-right: 32rpx;">
							{{isEdit?'完成':'编辑'}}
						</view>
					</view>
				</u-navbar>
				<!-- <view class="top_box">
					<view class="top_box-left">
						<image class="shop_icon" src="../../static/icon/shop.png" alt="" />
						店铺名称:ATK线上商城（样品展示）
					</view>
					<view @click="edit" class="top_box_right">
						{{isEdit?'完成':'编辑'}}
					</view>
				</view> -->
			</view>
			<view class="list_box">
				<view class="list_item" v-for="(item,index) in dataList" :key="index">
					<view @click="choose_item(index)" class="">
						<!-- <image v-if="item.isChoose==true" class="shop_choose" src="../../static/icon/choose.png" alt="" /> -->
						<!-- :style="{background:style.color1}" -->
						<u-icon v-if="item.isChoose==true" name="checkmark-circle-fill" class="shop_choose" :color="style.color1" size="40"></u-icon>
						<view v-else class="choose_no"></view>
					</view>
					<view class="list_item_right">
						<u-image @click="navTo(`/pages/shop_info/shop_info?id=${item.goods_id}`)" border-radius="16" width="160rpx" height="160rpx" :src="item.pic" mode="heightFix"></u-image>
						<view class="item_good_info">
							<view  class="item_good_info_title uni-ellipsis-2">
								{{item.goods_name}}
							</view>
							<view  @click="navTo(`/pages/shop_info/shop_info?id=${item.goods_id}`)" class="item_good_info_sku uni-ellipsis-1">
								{{item.sku_name}}
							</view>
							<view  @click="navTo(`/pages/shop_info/shop_info?id=${item.goods_id}`)" class="item_good_info_price">
									RMB ¥ {{item.price}}
							</view>
							<view class="item_good_info_price2">
								<span></span>
									<!-- <span @click="navTo(`/pages/shop_info/shop_info?id=${item.goods_id}`)">约{{item.rmb_price}}人民币</span> -->
									<u-number-box :value="item.num" :ref="'number_'+index" :min="1" :index="index"  @minus="valChange($event , item)" @blur="valChange($event , item)" @plus="valChange($event , item)"></u-number-box>
							</view>
						</view>
					</view>
				</view>
			</view>
			 <view slot="bottom">
			    <view class="bottom_box" style="background-color: #fff;">
			    	<view @click="choose_all" class="bottom_box_left">
			    		<!-- <image  class="shop_choose" src="../../static/icon/choose.png" alt="" /> -->
						<!-- :style="{background:style.color1}" -->
						<u-icon v-if="is_all" name="checkmark-circle-fill" class="shop_choose"  :color="style.color1" size="40"></u-icon>
						
			    		<view v-else class="choose_no"></view>
						<span style="" class="choseAll">{{is_all?'全不选':'全选'}}</span>
			    	</view>
					<view class="bottom_box_right">
						<view class="bottom_box_right_price">
							<!-- <span style="font-size: 26rpx;" v-if="!isEdit">合计：JPY Ұ {{price_all}}</span> -->
							<view class=""  v-if="!isEdit">
								<span class="price_1">合计</span>
								<span class="price_2"> ¥ {{price_all}}</span>
								<span class="price_3"> RMB </span>
							</view>
							<!-- <span v-if="!isEdit"s>约147.26RMB</span> -->
						</view>
						
						<view @click="submit(isEdit)" class="" :class="isEdit?'submit_del':'submit_box'" :style="isEdit?'':{background:style.color1}">
							{{isEdit?'删除':'结算'}}
						</view>
					</view>
			    </view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				is_all:false,
				dataList:[],
				value:0,
				price_all:0,
				ok:true,
				isEdit:false,
			}
		},
		onShow() {
			if(this.$refs.paging){
				this.$refs.paging.reload()	
			}
			var style =  uni.getStorageSync('style')
			style = JSON.parse(style)
			this.style = style
		},
		methods: {
			edit(){
				// 购物车编辑
				this.isEdit = !this.isEdit 
				if(this.isEdit == true){
					this.is_all = false
					this.dataList.forEach((item,index)=>{
						this.dataList[index].isChoose = false
					})
				}else{
					this.is_all = false
					this.dataList.forEach((item,index)=>{
						this.dataList[index].isChoose = false
					})
					this.getAllPrice()
				}
			},
			submit(){
				// 结算或删除的方法
				if(this.isEdit){
					// 删除
					uni.showModal({
						title: '删除',
						content: '确认删除选中的购物车商品?',
						cancelText: "取消", // 取消按钮的文字  
						confirmText: "确认", // 确认按钮的文字  
						showCancel: true, // 是否显示取消按钮，默认为 true
						success: (res) => {
							uni.setStorageSync('isModule' , false)
						if(res.confirm) {
							var arr = []
							this.dataList.forEach((item,index)=>{
								if(item.isChoose){
									arr.push(item.id)
								}
							})
							if(arr.length<1){
								uni.showToast({
									title:'请选择商品',
									icon:'none'
								})
								return
							}
							var data = {
								id :arr.join(',')
							}
							this.$gugoApi.GoodsCart_del(data).then(res=>{
								this.$refs.paging.reload()	
							})
						} else {
							
						}  
						} 
					})
					
				}else{
					// 结算
					var arr = []
					this.dataList.forEach((item,index)=>{
						if(item.isChoose){
							arr.push(item.id)
						}
					})
					console.log(arr)
					if(arr.length <= 0){
						uni.showToast({
							title:'未选中任何商品!',
							icon:'none'
						})
						return
					}
					var arr_string = arr.join(',')
					var data = {
						cart_ids : arr_string
					}
					data = JSON.stringify(data)
					uni.navigateTo({
						url:`/pages/shop_info/order_pay?Info=${data}`
					})
				}
				
			},
			getAllPrice(){
				// 計算合計價格
				
				var price = 0
				this.dataList.forEach((item,index)=>{
					if(item.isChoose){
						var good_price = Number((Number(item.price)*Number(item.num)).toFixed(2))
						price += Number(good_price)
					}
				})
				this.price_all = price.toFixed(2)
				
			},
			queryList(pageNo, pageSize){
				// setTimeout(()=>{
				// 	this.$refs.paging.complete([{}]);
				// } , 1000)
				this.$gugoApi.GoodsCart_list({"page": pageNo, "limit": 200 }).then(res=>{
					res.data.list.forEach((item,index)=>{
						res.data.list[index].isChoose = false
					})
					// this.dataList = res.data.list
					this.$refs.paging.complete(res.data.list);
					setTimeout(()=>{
						this.getAllPrice()
					} , 50)
				}).catch(err=>{	
					this.$refs.paging.complete(false);
				})
			},
			valChange(e , item){
				var data = {
					id:item.id,
					num : e.value
				}
				if(this.ok){
					this.ok = false
					this.$gugoApi.GoodsCart_update_num(data).then(res=>{
						this.ok = true
						this.dataList[e.index].num = e.value
						this.getAllPrice()
					}).catch(err=>{
						this.dataList[e.index].num = err.data
						var ref_key = `number_${e.index}`
						this.$refs[ref_key][0].inputVal=err.data
						this.ok = true
						this.getAllPrice()
					})
				}
			},
			choose_item(index){
				this.dataList[index].isChoose = !this.dataList[index].isChoose
				this.getAllPrice()
			},
			choose_all(){
				this.dataList.forEach((item,index)=>{
					this.dataList[index].isChoose = !this.is_all
				})
				this.is_all = !this.is_all
				this.getAllPrice()
			},
			navTo(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
@import url(./cart.scss);
</style>
